<template>
  <div class="page-four">
    <div class="title">产品质量状况分析</div>
    <div class="content">
      <div class="left">
        <div class="left-title" v-html="left_title"></div>
        <div class="charts-div">
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>举报投诉及申诉</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="chart-one" id="chartOne"></div>
          </div>
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>受理最多的五类产品类型</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="chart-two" id="chartTwo"></div>
          </div>
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>受理产品类型占比</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="chart-three" id="chartThree"></div>
          </div>
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>监督执法</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="chart-four" id="chartFour"></div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center-title" v-html="center_title"></div>
        <div class="charts-div">
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>基本状况</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="chart-five" id="chartFive"></div>
          </div>
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>投诉申诉</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="chart-six" id="chartSix"></div>
          </div>
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>监督执法</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="chart-seven" id="chartSeven"></div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-title" v-html="right_title"></div>
        <div class="charts-div">
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>标题</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="tab-grounp">
              <a href="javascript:;" :key="item.type" v-for="item in tabList" :class="{'activeA':activeIndex===item.type}" @click="tabFun(item.type)">{{item.name}}</a>
            </div>
            <div class="chart-eight" id="chartEight"></div>
          </div>
          <div class="chart">
            <div class="moduleTit-box">
              <div class="module-tit">
                <img src="../assets/img/tit-point.png" alt="">
                <span>标题</span>
                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              </div>
            </div>
            <div class="chart-nine" id="chartNine"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    complaintOption,
    pTypeTopOption,
    productTypePieOption,
    supersiveOption,
    baseStatusOption,
    complaintTypeOption,
    superviseOption,
    standerTypeOption,
    standerdOption
  } from '../lib/js/secScreen.js';
  export default {
    data() {
      return {
        activeIndex: 1,
        tabList: [{
          name: '国家标准',
          type: 1,
        }, {
          name: '企业标准',
          type: 2
        }, {
          name: '国际标准',
          type: 3
        }, {
          name: '团体标准',
          type: 4
        }],
        message: 'hello',
        left_title: '标题23',
        center_title: '计量',
        right_title: '标准',
        //left chart-one
        complaintData: {
          numList: [200, 240, 90, 108],
          tongbiList: [7, 13, 75, 10],
          huanbiList: [75, 20, 60, 78]
        },
        standerdData: {
          countryNum: [200, 240, 90, 108, 100, 100],
          companyNum: [200, 240, 90, 108, 45, 88],
          countryRate: [7, 13, 75, 10, 41, 99],
          companyRate: [75, 20, 60, 78, 44, 22]
        },
        pTypeTopData: [{
            data: [20, 100, 60, 78, 10]
          },
          {
            data: [40, 10, 60, 48, 20]
          },
          {
            data: [30, 15, 37, 21, 90]
          },
          {
            data: [20, 100, 60, 40, 10]
          },
          {
            data: [20, 10, 60, 78, 10]
          }
        ],
        inStitucolor: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#fa827e' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#f7cdcb' // 100% 处的颜色
          }],
        }, {
          type: 'radial',
          x: 0,
          y: 0,
          r: 1,
          colorStops: [{
            offset: 0,
            color: '#36b33a' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#ade6f8' // 100% 处的颜色
          }],
        }, {
          type: 'radial',
          x: 0,
          y: 0,
          r: 1,
          colorStops: [{
            offset: 0,
            color: '#76c999' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#bab6d3' // 100% 处的颜色
          }],
        }, {
          type: 'radial',
          x: 0,
          y: 0,
          r: 1,
          colorStops: [{
            offset: 0,
            color: '#fddb7a' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#fef5d8' // 100% 处的颜色
          }],
        }],
        productTypeData: [{
            name: '家电',
            value: 8,
          }, {
            name: '汽配',
            value: 10,
          }, {
            name: '农资',
            value: 30,
          }, {
            name: '能源',
            value: 9,
          }, {
            name: '棉花',
            value: 30,
            labelLine: {
              show: true
            }
          }, {
            name: '建材',
            value: 30,
          }, {
            name: '玩具',
            value: 30,
          }, {
            name: '计量',
            value: 40,
          },
          // {
          //   name: '化工',
          //   value: 31,
          // },
          {
            name: '日用消费品',
            value: 50,
          }
        ],
        supersiveData: [36, 17, 23, 83],
        baseStatusData: [30, 40, 50, 60, 70, 80, 100],
        complaintTypeData: [30, 40, 50, 60, 70, 80, 100],
        superviseData: [10, 40, 30, 80, 70, 10, 50],
        standerTypeData: [
          [1, 30, 50, 60],
          [30, 10, 70, 20],
          [90, 30, 90, 40],
          [30, 10, 30, 90],
        ]
      }
    },
    methods: {
      createCanvas(option, id) {
        let myChart = this.$echarts.init(document.getElementById(id))
        myChart.clear();
        option['animation'] = true;
        option['animationDuration'] = 1000;
        option['animationEasing'] = 'cubicOut'
        myChart.setOption(option);
      },
      tabFun(type) {
        let that = this;
        that.activeIndex = type;
        this.standerTypeData[type - 1].forEach((item, index) => {
          standerTypeOption.series[0].data[index].value = item;
        });
        this.createCanvas(standerTypeOption, 'chartEight');
      }
    },
    mounted() {
      let that = this;
      this.complaintData.numList.forEach((item, index) => {
        complaintOption.series[0].data[index].value = item
      });
      complaintOption.series[2]['data'] = this.complaintData.tongbiList;
      complaintOption.series[3]['data'] = this.complaintData.huanbiList;
      that.createCanvas(complaintOption, 'chartOne');
      //受理最多的五种类型产品
      this.pTypeTopData.forEach((item, index) => {
        if (index > 3) return
        pTypeTopOption.series[index]['data'] = item.data;
      });
      that.createCanvas(pTypeTopOption, 'chartTwo');
      //受理产品类型占比
      let indexActive = 0
      this.productTypeData.forEach((item, index) => {
        if (indexActive > 3)
          indexActive = 0;
        let js = {
          name: item.name,
          value: item.value,
          itemStyle: {
            color: ''
          }
        }
        js['itemStyle']['color'] = this.inStitucolor[indexActive]
        productTypePieOption.series[0].data.push(js)
        indexActive++;
      });
      console.log(productTypePieOption)
      this.createCanvas(productTypePieOption, 'chartThree')
      //监督执法
      this.supersiveData.forEach((item, index) => {
        supersiveOption.series[1].data[index].value = item;
      });
      this.createCanvas(supersiveOption, 'chartFour');
      // 计量基本状况
      this.baseStatusData.forEach((item, index) => {
        baseStatusOption.series[0].data[index].value = item;
      });
      this.createCanvas(baseStatusOption, 'chartFive');
      // 投诉申诉
      this.complaintTypeData.forEach((item, index) => {
        complaintTypeOption.series[0].data[index].value = item;
      });
      this.createCanvas(complaintTypeOption, 'chartSix');
      // 监督执法
      this.superviseData.forEach((item, index) => {
        superviseOption.series[0].data[index].value = item;
      });
      this.createCanvas(superviseOption, 'chartSeven');
      //标准  类别
      this.tabFun(1);
      // this.standerTypeData[0].forEach((item, index) => {
      //   standerTypeOption.series[0].data[index].value = item;
      // });
      // this.createCanvas(standerTypeOption, 'chartEight');
      //标准
      standerdOption.series[0].data = this.standerdData.companyNum;
      standerdOption.series[1].data = this.standerdData.countryNum;
      standerdOption.series[3]['data'] = this.standerdData.countryRate;
      standerdOption.series[4]['data'] = this.standerdData.companyRate;
      that.createCanvas(standerdOption, 'chartNine');
    },
    computed: {},
  }
</script>

<style scoped lang="scss">
  @import "../lib/css/until";
  .page-four {
    color: $wordColor;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 193px 200px 193px;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 10;
    .title {
      height: $oneTitH;
      line-height: $oneTitH;
      width: $oneTitW;
      margin: 0 auto 50px;
      color: $wordColor;
      font-size: 140px;
      text-align: center;
      background: url("../assets/img/title.png") no-repeat;
    }
    .content {
      display: flex;
      .left {
        width: 3407px;
        height: 2715px;
        background: url("../assets/img/sec-left.png") no-repeat;
        margin-right: 104px;
        .left-title {
          margin-top: 39px;
          margin-left: 1472px;
          text-align: center;
          width: 583px;
          height: 153px;
          font-size: 72px;
          line-height: 153px;
        }
        .charts-div {
          margin-top: 52px;
          padding: 0 62px; // height: 500px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          .chart {
            margin-top: 38px;
            width: 1592px;
            height: 1075px; // border: 1px solid yellow;
            @include linerBg();
            .moduleTit-box {
              font-size: 69px;
              padding-top: 136px;
              .module-tit {
                display: flex;
                justify-content: space-between;
              }
            }
            .chart-one {
              width: 100%;
              height: 790px; // @include linerBg();
            }
            .chart-two {
              width: 100%;
              height: 790px; // @include linerBg();
            }
            .chart-three {
              width: 100%;
              height: 790px; // @include linerBg();
            }
            .chart-four {
              width: 100%;
              height: 790px; // @include linerBg();
            }
          }
        }
      }
      .center {
        width: 1771px;
        height: 2715px;
        background: url("../assets/img/sec-center.png") no-repeat;
        margin-right: 104px;
        .center-title {
          margin-top: 39px;
          margin-left: 586px;
          text-align: center;
          width: 583px;
          height: 153px;
          font-size: 72px;
          line-height: 153px;
        }
        .charts-div {
          margin-top: 90px;
          padding: 0 62px;
          .chart {
            margin-top: 38px;
            width: 1592px;
            height: 750px; // border: 1px solid yellow;
            @include linerBg();
            .moduleTit-box {
              font-size: 69px;
              padding-top: 85px;
              .module-tit {
                display: flex;
                justify-content: space-between;
              }
            }
            .chart-five {
              width: 100%;
              height: 500px; // @include linerBg();
            }
            .chart-six {
              width: 100%;
              height: 500px; // @include linerBg();
            }
            .chart-seven {
              width: 100%;
              height: 500px; // @include linerBg();
            }
          }
        }
      }
      .right {
        width: 1771px;
        height: 2715px;
        background: url("../assets/img/sec-center.png") no-repeat;
        .right-title {
          margin-top: 39px;
          margin-left: 586px;
          text-align: center;
          width: 583px;
          height: 153px;
          font-size: 72px;
          line-height: 153px;
        }
        .charts-div {
          margin-top: 90px;
          padding: 0 62px;
          .chart {
            margin-top: 38px;
            width: 1592px;
            height: 1075px; // border: 1px solid yellow;
            @include linerBg();
            .tab-grounp {
              width: 1071px;
              height: 109px;
              margin: 0 auto;
              a {
                text-shadow: 2.5px 4.33px 0px rgba(0, 0, 0, 0.004);
                display: inline-block;
                vertical-align: top;
                box-sizing: border-box;
                width: 25%;
                height: 100%;
                line-height: 109px;
                text-align: center;
                background-color: #1c54a4;
                font-size: 48px;
                color: $wordColor;
                border-right: 1px solid #000;
                &:last-child {
                  border-right: 0;
                  border-top-right-radius: 20px;
                  border-bottom-right-radius: 20px;
                }
                &:first-child {
                  border-bottom-left-radius: 20px;
                  border-top-left-radius: 20px;
                }
                &.activeA {
                  background-color: #1d3645;
                }
              }
            }
            .moduleTit-box {
              font-size: 69px;
              padding-top: 85px;
              .module-tit {
                display: flex;
                justify-content: space-between;
              }
            }
            .chart-eight {
              width: 100%;
              height: 500px; // @include linerBg();
            }
            .chart-nine {
              width: 100%;
              height: 650px; // @include linerBg();
            }
          }
        }
      }
    }
  }
</style>

